<template>
  <div>
    <div class="wrapper_1200">
      <div class="user-wrapper">
        <div class="content clearfix acea-row">
          <div class="left-box">
            <div class="menu-collapse">
              <div
                class="menu-title cursors"
                :class="!searchForm.cid ? 'active-color' : ''"
                @click="goCategoryAll()"
              >
                <span class="iconfont2 ic-quanbu"></span>
                {{ $t(`page.users.goodsCommentList.all`) }}
              </div>
              <div class="tree-card">
                <el-tree
                  :highlight-current="true"
                  default-expand-all
                  :data="category"
                  :props="defaultProps"
                  @node-click="goCategoryGoods"
                ></el-tree>
              </div>
            </div>
          </div>
          <NuxtChild keep-alive />
          <div class="right-box">
            <div class="sort acea-row">
              <div
                class="items"
                :class="iSdefaults === 1 ? 'active-color' : ''"
                @click="set_where(1)"
              >
                {{ $t(`page.goodsList.default`) }}
              </div>
              <div
                class="items acea-row"
                :class="stock !== 0 ? 'active-color' : ''"
                @click="set_where(3)"
              >
                {{ $t(`page.goodsList.sales`) }}
                <img
                  v-if="stock == 1"
                  src="../../../assets/images/up.png"
                  alt=""
                />
                <img
                  v-else-if="stock == 2"
                  src="../../../assets/images/down.png"
                  alt=""
                />
                <img v-else src="../../../assets/images/horn.png" alt="" />
              </div>
              <div
                class="items acea-row"
                :class="price !== 0 ? 'active-color' : ''"
                @click="set_where(2)"
              >
                <span>{{ $t(`page.goodsList.price`) }}</span>
                <img
                  v-if="price == 1"
                  src="../../../assets/images/up.png"
                  alt=""
                />
                <img
                  v-else-if="price == 2"
                  src="../../../assets/images/down.png"
                  alt=""
                />
                <img v-else src="../../../assets/images/horn.png" alt="" />
              </div>
              <div class="item price-range">
                <div class="price-count">
                  <el-input
                    class="input"
                    v-model.number="searchForm.minPrice"
                  ></el-input>
                  -
                  <el-input
                    class="input"
                    v-model.number="searchForm.maxPrice"
                  ></el-input>
                </div>
                <div class="action-box">
                  <span class="action-btn clear" @click="clearPrice">
                    {{ $t(`page.goodsAddcart.empty`) }}
                  </span>
                  <span class="action-btn submit" @click="getProductList('')">
                    {{ $t(`page.goodsDetail.confirm`) }}
                  </span>
                </div>
              </div>
            </div>
            <div class="goods-list" v-loading="loading">
              <div class="list" v-if="productList.length > 0">
                <div class="brandshop">
                  <div class="store">
                    <goods-list
                      :productList="productList"
                      :picBox="picBox"
                    ></goods-list>
                  </div>
                </div>
              </div>
              <div class="noCart" v-if="!productList.length && !loading">
                <div class="pictrue">
                  <img src="../../../assets/images/noCart.png" />
                </div>
                <div class="tip">{{ $t(`page.goodsList.empty`) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      v-if="total > 0"
      background
      layout="prev, pager, next"
      :total="total"
      :pageSize="searchForm.limit"
      @current-change="bindPageCur"
    ></el-pagination>
  </div>
</template>
<script>
import { Debounce } from "@/utils/validate.js";
import { followMer } from "@/utils/order.js";
import product from "@/components/product";
import goodsList from "@/components/goodsList";
import { isJSON, mapToLang, toTranslateLang } from "@/utils/index.js";
export default {
  name: "store",
  auth: false,
  components: { product, goodsList },
  data() {
    return {
      picBox: {
        width: "210",
        height: "210",
      },
      loading: false,
      search: "",
      current: 0,
      total: 0,
      productList: [],
      iSdefaults: 0,
      category: [], //店铺分类
      searchForm: {
        cid: null,
        page: 1, //代表页面的初始页数
        limit: 20,
        maxPrice: null,
        minPrice: null,
        merId: null,
        priceOrder: "",
        salesOrder: "",
        keyword: "",
      },
      stock: 0,
      price: 0,
      defaultProps: {
        children: "childList",
        label: "translateName",
      },
    };
  },
  async asyncData({ app, query }) {
    let [category] = await Promise.all([
      app.$axios.get(`/api/front/product/merchant/${query.id}/category/list`),
    ]);
    console.log("app", app);
    toTranslateLang(category.data, "ru");
    console.log("category", category.data);
    return {
      category: category.data,
      menuCur: query.type,
      cateId: query.cateId,
      merId: query.id,
      search: query.search,
    };
  },
  watch: {
    "$route.query.search": function (nval, oldval) {
      this.search = nval;
      this.getProductList();
    },
  },
  head() {
    return {
      title: this.$t(`page.store.classify`),
    };
  },
  created() {
    this.getProductList();
  },
  methods: {
    getProductList() {
      this.loading = true;
      this.setWhere();
      this.searchForm.merId = this.merId;
      this.searchForm.keyword = this.search;
      this.$axios
        .get(`/api/front/product/merchant/pro/list`, {
          params: this.searchForm,
        })
        .then((res) => {
          this.total = res.data.total;
          this.productList = res.data.list.map((item) => {
            item.productId = item.id;
            return item;
          });
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    goCategoryAll() {
      this.searchForm.cid = "";
      this.getProductList();
    },
    goCategoryGoods(item, index) {
      this.searchForm.cid = item.id;
      if (index) this.current = index == this.current ? -1 : index;
      this.getProductList();
    },
    change(e) {
      this.$forceUpdate();
    },
    clearPrice() {
      this.searchForm.minPrice = "";
      this.searchForm.maxPrice = "";
    },
    /**
     * 分页点击
     * */
    bindPageCur(data) {
      this.searchForm.page = data;
      this.getProductList("");
    },
    toggle(index) {
      this.current = index == this.current ? -1 : index;
    },
    setWhere: function () {
      if (this.price == 0) this.searchForm.priceOrder = "";
      else if (this.price == 1) this.searchForm.priceOrder = "asc";
      else if (this.price == 2) this.searchForm.priceOrder = "desc";
      if (this.stock == 0) this.searchForm.salesOrder = "";
      else if (this.stock == 1) this.searchForm.salesOrder = "asc";
      else if (this.stock == 2) this.searchForm.salesOrder = "desc";
    },
    set_where(e) {
      switch (e) {
        case 1:
          this.iSdefaults = 1;
          this.price = 0;
          this.stock = 0;
          break;
        case 2:
          this.iSdefaults = 0;
          if (this.price == 0) this.price = 1;
          else if (this.price == 1) this.price = 2;
          else if (this.price == 2) this.price = 0;
          this.stock = 0;
          break;
        case 3:
          this.iSdefaults = 0;
          if (this.stock == 0) this.stock = 1;
          else if (this.stock == 1) this.stock = 2;
          else if (this.stock == 2) this.stock = 0;
          this.price = 0;
          break;
        default:
          break;
      }
      this.$set(this.searchForm, "page", 1);
      this.getProductList("");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.trader_box {
  margin: 8px 0 16px 0;
}

.trader {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  text-align: center;
  color: #fff;
  background: #00785e;
  border-radius: 3px;
  margin-right: 3px;
  font-size: 12px;
}

.content {
  margin-top: 25px;
}
.store {
  padding: 15px;
  background: #fff;
}

.store-banner {
  width: 100%;
  height: 130px;
  overflow: hidden;
  min-width: 1200px;
  img {
    object-fit: none;
    width: 100%;
    height: 100%;
  }
}

.wrapper_1200 {
  margin: 0 auto;
}

.user-menu {
  position: relative;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 10px;
  .category {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: rgba(254, 248, 248, 0.96);
    width: 100%;
    padding: 40px 20px 20px;
    z-index: 10;
    .name {
      width: 130px;
      position: relative;
      padding-right: 20px;
      margin-right: 30px;
      cursor: pointer;
      .iconfont {
        font-size: 10px;
        position: absolute;
        right: 0;
        top: 3px;
        color: #282828;
      }
    }
    .sortCon {
      width: 1000px;
      .sub-item {
        margin: 0 15px 15px;
        color: #666666;
        cursor: pointer;
      }
    }
    .erSort {
      align-items: center;
    }
    .item {
      margin-bottom: 20px;
      align-items: baseline;
    }
    .moreBtn {
      color: #282828;
      font-size: 12px;
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      border: 1px solid #666666;
    }
  }

  .shop {
    width: 671px;
    height: 130px;
    background: #fff;
    position: absolute;
    bottom: 90px;
    left: 0;
    display: flex;
    padding: 15px 20px;
    margin-left: 25px;

    .shop-left {
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }

    .shop-right {
      margin-left: 20px;
      width: 510px;

      .title {
        display: flex;
        justify-content: space-between;

        .name {
          font-size: 24px;
          font-family: ArialMT;
          color: #333333;
          line-height: 24px;
        }
      }

      .shop-detail {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-family: ArialMT;
        color: #666666;
        line-height: 12px;

        .qualification {
          img {
            display: inline-block;
            margin-left: 5px;
          }
        }

        .seller {
          .iconfont {
            color: #00785e;
          }
        }
      }
    }
  }
  .menu-main {
    height: 40px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    .menu-item {
      display: inline-block;
      height: 26px;
      line-height: 26px;
      color: #333;
      padding: 0 15px;
      cursor: pointer;
      &.active {
        color: #00785e;
        border-radius: 15px;
      }
    }
  }
  .menu-search {
    width: 220px;
    // height: 24px;
    background-color: #fff;
    border-radius: 17px;

    .text {
      width: 175px;
    }

    input {
      width: 220px;
      position: relative;
      border: none;
      height: 24px;
      line-height: 24px;
      color: #999999;
      padding: 0 15px;
      border: 1px solid #cccccc;

      &:focus {
        border: none;
        outline: 1px solid #cccccc;
      }
    }

    .iconfont {
      position: absolute;
      top: 0;
      right: 18px;
      color: #999999;
    }
    .bnt {
      width: 44px;
      background-color: #282828;
      color: #fff;
      border-radius: 0 17px 17px 0;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.user-wrapper {
  width: 1200px;
  // height: 66px;
  margin: 0 auto;
  .left-box {
    width: 270px;
    .menu-collapse {
      background: #fff;
      border-radius: 8px;
      .menu-title {
        padding: 12px;
        font-size: 16px;
        border-bottom: 1px solid #f2f2f2;
      }
      .tree-card {
        min-height: 500px;
        padding: 12px 12px 12px 20px;
        ::v-deep .el-tree {
          color: $use-color-info;
          .el-tree-node__expand-icon {
            color: $use-color-info;
          }
          .el-tree-node__expand-icon.is-leaf {
            color: transparent;
          }
          // .el-tree-node__content:hover {
          //   background-color: transparent;
          //   color: #00785E;
          // }
        }
        ::v-deep
          .el-tree--highlight-current
          .el-tree-node.is-current
          > .el-tree-node__content {
          background-color: transparent;
          color: $user--color-primary;
        }
      }
    }
  }
  .right-box {
    width: 915px;
    min-height: 730px;
    margin-left: 15px;
    padding-bottom: 30px;
    .sort {
      background: #fff;
      height: 64px;
      align-items: center;
      padding: 0px 15px;
      border-radius: 8px;
      .item {
        margin-right: 30px;
        cursor: pointer;
        &:hover {
          color: #00785e;
        }
        .icon {
          font-size: 15px;
          margin-left: 5px;
          color: #e2e2e2;
        }
        .iconfont {
          font-size: 15px;
          color: #e2e2e2;
          margin-left: 5px;
        }
      }
      .name {
        color: #969696;
        margin-right: 20px;
      }
    }
  }
}

.router-tips {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  a {
    color: #333;
  }
  span {
    color: #999999;
  }
}

.noGoods {
  text-align: center;
  .pictrue {
    width: 274px;
    height: 213px;
    margin: 130px auto 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.banner {
  width: 1200px;
  height: 180px;
  margin: auto;
  // position: relative;

  img {
    width: 100%;
    height: 180px;
  }
}

.goods {
  width: 1200px;
  height: 340px;
  margin: auto;

  img {
    width: 100%;
    height: 100%;
  }
}

.goods-list {
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
  ::v-deep .wrapper {
    width: auto !important;
  }
  ::v-deep .goods_item {
    margin: 0 15px 24px 0;
    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .title {
    text-align: center;

    .name {
      font-size: 24px;
      font-family: Arial-BoldMT, Arial;
      font-weight: normal;
      color: #333333;
      line-height: 24px;
      margin-top: 40px;
      margin-bottom: 14px;
    }

    .text {
      font-size: 16px;
      font-family: ArialMT;
      color: #999999;
      line-height: 16px;
      margin-bottom: 34px;
    }
  }

  .list {
    .goods_item {
      display: inline-block;
      width: 284px;
      height: 390px;
      margin: 0 13px 15px 0;
      background: #ffffff;

      img {
        width: 244px;
        height: 244px;
        margin: 20px 20px 8px;
      }

      .goods_content {
        .store_name {
          height: 44px;
          margin: 0 22px 20px 15px;
          font-size: 16px;
          font-family: ArialMT;
          color: #333333;
          line-height: 22px;
        }
        .lines2 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .acea_row {
        margin-left: 15px;
        .price {
          font-size: 20px;
          font-family: DINCond-Black, DINCond;
          font-weight: 900;
          color: #00785e;
          line-height: 20px;
          margin-bottom: 9px;
        }
        .ot_price {
          font-size: 12px;
          font-family: DINPro-Regular, DINPro;
          font-weight: 400;
          color: #888888;
          line-height: 12px;
          text-decoration: line-through;
        }
      }
    }
  }
}

.noCart {
  text-align: center;
  margin-bottom: 70px;
  margin-top: 70px;
  .pictrue {
    width: 216px;
    height: 136px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
    .tip {
      margin-top: 12px;
      color: #646464;
    }
  }
}

.sort {
  .items {
    margin-right: 30px;
    position: relative;
    cursor: pointer;
    &:hover {
      color: #00785e;
    }
    img {
      width: 7px;
      height: 10px;
      margin-left: 5px;
      margin-top: 5px;
    }
    .icon {
      font-size: 15px;
      margin-left: 5px;
    }
    .iconfont {
      font-size: 15px;
      color: #e2e2e2;
      margin-left: 5px;
    }
  }
  .name {
    color: #969696;
    margin-right: 20px;
  }
}

.price-range {
  position: relative;
  // top: -15px;
  padding: 10px;
  &:hover {
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
    .action-box {
      display: block;
    }
  }
  .action-box {
    display: none;
    position: absolute;
    z-index: 99;
    left: 0;
    bottom: -50px;
    text-align: center;
    background: #f9f9f9;
    height: 50px;
    line-height: 50px;
    width: 100%;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
    padding: 0 15px;
    overflow: hidden;
    .clear {
      float: left;
      color: #999999;
    }
    .submit {
      float: right;
      color: #666666;
      width: 60px;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      background-color: #f1f1f1;
      border-radius: 2px;
      border: 1px solid #d4d4d4;
    }
  }
  .price-count {
    .input {
      width: 80px;
      height: 32px;
      position: relative;

      &:before {
        display: inline-block;
        color: #d4d4d4;
        position: absolute;
        left: 5px;
        top: 0;
        line-height: 32px;
      }
      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding-left: 18px;
      }
    }
  }
}

::v-deep .el-rate__item {
  width: 16px;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding-left: 18px;
}
</style>
